<template>
  <div class="item">
    <div class="itembody">
      <div class="left">
        <img :src="itemdata.unitPicture" alt="" class="img" />
      </div>
      <div class="right">
        <div class="rightbody">
          <div class="title">{{ itemdata.hotelName }}</div>
          <div class="time">
            预定:{{ itemdata.checkInDate }}-{{ itemdata.checkInLatestTime }} 至
            {{ itemdata.checkOutDate }}-{{ itemdata.checkOutLatestTime }}
          </div>
          <div class="address">
            <span class="text"> 地址:{{ itemdata.address }} </span>
          </div>
          <div class="contorl">
            <slot>
              <div v-if="stuts == 1" class="endtime">
                <template v-if="payAmount != 0">
                  <span class="pretime"
                    >{{ pretime }} {{ itemdata.summary }}</span
                  >
                </template>
                <div v-else></div>
              </div>
              <div v-else></div>
              <van-button class="btn" size="mini" type="warning">{{
                itemdata.orderStatusDesc
              }}</van-button>
              <template v-if="stuts == 1">
                <template v-if="payAmount == 0">
                  <van-button class="btn" size="mini" type="default"
                    >已取消</van-button
                  >
                </template>

                <template v-else>
                  <van-button
                    class="btn"
                    @click="quxiaobtn"
                    size="mini"
                    type="danger"
                    >取消</van-button
                  >
                </template>
              </template>
              <template v-else>
                <van-button class="btn" size="mini" type="default"
                  >再次订购</van-button
                >
              </template>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  itemdata: {
    type: Object,
    default: {},
  },
});

//取消
const quxiaobtn = () => {
  console.log("取消");
};

let stuts = props.itemdata.orderStatus;
const payAmount = ref(props.itemdata.prepayAmount); //时间

const pretime = computed(() => {
  //格式化
  let minuites = Math.floor(payAmount.value / 60);
  let senconds = payAmount.value % 60;
  return minuites + "分" + senconds + "秒";
});
const timeout = () => {
  //倒计时
  const timer = setInterval(() => {
    if (payAmount.value > 0) {
      payAmount.value--;
      // console.log(payAmount.value);
    } else {
      clearInterval(timer);
    }
  }, 1000);
};
timeout(payAmount);
</script>

<style lang="less" scoped>
.item {
  width: 100%;
  .itembody {
    padding: 20px;
    display: flex;
    .left {
      .img {
        width: 100px;
        height: 100px;
        border-radius: 5px;
      }
    }
    .right {
      flex: 1;
      .rightbody {
        padding: 0 15px;
        .title {
          font-size: 16px;
          font-weight: 700;
        }
        .time {
          font-size: 12px;
          color: #666;
          margin-top: 5px;
        }
        .address {
          margin-top: 5px;
          width: 170px;
          font-size: 12px;
          color: #666;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .contorl {
          .endtime {
            margin-top: 5px;
            color: #999;
            .pretime {
              font-size: 12px;
            }
          }

          .btn {
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>
